<template>
	<view class="m30">
		<view class="bgFff radius30 p30">
			<view class="">
				<u--textarea v-model="form.title" placeholder="好标题可获得更多浏览" count border="none" height="80" autoHeight
					maxlength="30"></u--textarea>
			</view>
			<u-line color="#ddd" margin="20rpx 0"></u-line>
			<view class="">
				<u--textarea v-model="form.sceneDesc" :placeholder="`请输入${type==1?'Plog':'Vlog'}描述`" count border="none" height="200"
					maxlength="5000"></u--textarea>
			</view>
		</view>
		<u-gap height="10"></u-gap>
		<view class="bgFff radius30 p30">
			<view class="" v-if="type == 1">
				<view class="">
					<u-upload :fileList="imgList" @afterRead="(e)=>{afterRead(e,'imgList')}" @delete="deletePic"
						name="1" multiple uploadIcon="photo" :maxCount="20" width="100" height="100">
						<view class="upload_box bgF7">
							<image src="../../static/images/you/add.png" mode="" style="width: 60rpx;height: 60rpx;">
							</image>
							<view class="c999 f24">点击上传图片</view>
						</view>
					</u-upload>
				</view>
				<view class="c666 f24 mt10">请上传1-20张图片，每张不超过60MB</view>
			</view>
			<view class="" v-else>
				<view class="flex">
					<view class="mr20">
						<u-upload :fileList="videoList" @afterRead="(e)=>{afterRead(e,'videoList')}" @delete="deletePic"
							name="1" multiple uploadIcon="photo" accept="video" :maxCount="1" width="100" height="100">
							<view class="upload_box bgF7">
								<image src="../../static/images/you/add_v.png" mode=""
									style="width: 60rpx;height: 60rpx;"></image>
								<view class="c999 f24">点击上传视频</view>
							</view>
						</u-upload>
					</view>
					<view class="">
						<u-upload :fileList="coverList" @afterRead="(e)=>{afterRead(e,'coverList')}" @delete="deletePic"
							name="1" multiple uploadIcon="photo" :maxCount="1" width="100" height="100">
							<view class="upload_box bgF7">
								<image src="../../static/images/you/add.png" mode=""
									style="width: 60rpx;height: 60rpx;"></image>
								<view class="c999 f24">点击上传封面图</view>
							</view>
						</u-upload>
					</view>
				</view>
				<view class="c666 f24 mt10">请上传长度5秒至3分钟的视频</view>
			</view>
			<u-gap height="30"></u-gap>
			<view class="flex-jus" @click="chooseAddress">
				<view class="left-label">
					<image src="../../static/images/you/address.png" mode="" style="width: 48rpx;height: 48rpx;">
					</image>
				</view>
				<view class="flex ml30">
					<text class="f26 mr20" :class="form.addr?'c343':'c999'">{{form.addr || '添加地点'}}</text>
					<u-icon name="arrow-right" color="#34314F"></u-icon>
				</view>
			</view>
			<u-line color="#ddd" margin="30rpx 0"></u-line>
			<view class="">
				<view class="left-label flex">
					<image src="../../static/images/you/correlation.png" mode="" style="width: 48rpx;height: 48rpx;">
					</image>
					<text class="c343 f26 ml20">关联栏目</text>
				</view>
				<view class="flex-jus mt20">
					<view class="bgF7 radiusBox flex-jus p10 flex1" @click="show_pickerBtn">
						<text class="f24 mr20" :class="type1.id?'c343':'c999'">{{type1.title || '选择栏目'}}</text>
						<u-icon name="arrow-down-fill" color="#999" size="12"></u-icon>
					</view>
				</view>
			</view>
			<u-line color="#ddd" margin="30rpx 0"></u-line>
			<view class="">
				<view class="left-label flex">
					<image src="../../static/images/you/tag.png" mode="" style="width: 48rpx;height: 48rpx;"></image>
					<text class="c343 f26 ml20">标签</text>
				</view>
				<view class="mt20 flex">
					<view class="tag flex p10 mr10 radius50" v-for="(item,index) in tagList" :key="index">
						<text class="f24 mr10 c999 textoverflow">{{item}}</text>
						<u-icon name="close" color="#999" size="12" @click="delTag(index)"></u-icon>
					</view>
					<view class="bgF7 radius50 flex p10" @click="openTag">
						<u-icon name="plus" color="#999" size="12"></u-icon>
						<text class="f24 ml10 c999">自定义标签</text>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="100"></u-gap>
		<view class="fix-bot bgFff">
			<view class="flex m30">
				<view class="flex mr30" @click="checkForm(2)">
					<image src="../../static/images/you/cg.png" mode="" style="width: 54rpx;height: 54rpx;"></image>
					<text class="c343 f26 ml10">存草稿</text>
				</view>
				<view class="flex1 ml30">
					<u-button color="#FFDE6D" :customStyle="{'color':'#34314F'}" shape="circle"
						@click="checkForm(1)">发布作品</u-button>
				</view>
			</view>
			<u-gap height="10"></u-gap>
		</view>
		<u-picker :show="show_picker" ref="uPicker" :columns="columns" keyName="title" @change="pickerChange" @cancel="show_picker = false"></u-picker>
		<!-- 添加标签 -->
		<u-popup :show="show_tag" @close="show_tag = false" mode="center" @open="openTag" closeable round="20"
			:customStyle="{'width':'80%'}">
			<view class="p30">
				<view class="c343 bold">添加标签</view>
				<u-gap height="20"></u-gap>
				<view class="">
					<u--textarea v-model="tageText" placeholder="请输入标签内容" count border="none" autoHeight
						maxlength="10"></u--textarea>
				</view>
				<u-gap height="20"></u-gap>
				<view class="flex-au">
					<u-button color="#FFDE6D" :customStyle="{'color':'#34314F','height':'80rpx','width':'40%'}"
						shape="circle" @click="tagSubmit">确定</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 确认发布 -->
		<u-popup :show="show_sure" @close="show_sure = false" mode="center" @open="show_sure = true"
			:closeOnClickOverlay="false" round="20" :customStyle="{'width':'80%'}">
			<view class="p30">
				<view class="c343 bold textC">确认此操作？</view>
				<u-gap height="20"></u-gap>
				<view class="">
					<text class="c343 f26">作品必须为本人原创，如因使用他人素材或作品引起的法律纠纷将由您个人承担因此所产生的一切法律责任包括但不限于赔偿金、律师费、诉讼费等。</text>
				</view>
				<u-gap height="20"></u-gap>
				<view class="flex-au">
					<view class="flex1 mr20">
						<u-button color="#f7f7f7" :customStyle="{'color':'#34314F','height':'80rpx'}" shape="circle"
							@click="show_sure = false">取消发布</u-button>
					</view>
					<view class="flex1 ml20">
						<u-button color="#FFDE6D" :customStyle="{'color':'#34314F','height':'80rpx'}" shape="circle"
							@click="submitForm">同意并发布</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 栏目 -->
		<u-popup :show="show_type" @close="show_type = false" mode="center" @open="show_type = true" closeable
			round="20" :customStyle="{'width':'80%'}">
			<view class="p30">
				<view class="c343 bold">选择栏目</view>
				<u-gap height="20"></u-gap>
				<view class="">
					<u-radio-group v-model="modal_typeIndex" placement="column">
						<u-radio :customStyle="{margin: '8px 0'}" labelSize="14" activeColor="#FFDE6D"
							v-for="(item, index) in typeList" :key="index" :label="item.title" :name="index">
						</u-radio>
					</u-radio-group>
				</view>
				<u-gap height="20"></u-gap>
				<view class="flex-au">
					<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx','width':'40%'}"
						shape="circle" @click="typeConfirm">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {getVlogcate,getStore,createVlog} from '@/common/api_wan.js'
	export default {
		name: '',
		data() {
			return {
				show_picker:false,
				show_sure: false,
				show_tag: false,
				type: '', //1图片，2视频
				form:{
					title:'',
					sceneDesc:'',
					addr:'',
				},
				modal_type:'',
				modal_typeIndex:0,
				show_type:false,
				columns:[],
				typeList:[],
				type1: {},
				type2: {},
				type3: {},
				type1List:[
					{
						title:'旅游',
						id:'2'
					},
					{
						title:'美食',
						id:'1'
					}
				],
				storeList: [],
				tourList:[],
				type2List:[],
				type3List:[],
				tageText: '',
				tagList: [],
				imgList: [],
				videoList: [],
				coverList: [],
				status:''
			}
		},
		onLoad(option) {
			this.type = option.type
			uni.setNavigationBarTitle({
				title: this.type == 1 ? '发布Plog' : '发布Vlog'
			})
			this.getVlogcate()
		},
		methods: {
			async getVlogcate() {
				uni.showLoading({
					mask: true
				})
				const res = await getVlogcate()
				if (res.code == 200) {
					const { storeTypes, tourTypes } = res.data
					this.storeList = storeTypes
					this.tourList = tourTypes
					//this.type2List = tourTypes
					//this.columns = [this.type1List,this.type2List]
					// if(this.type1.id == 1){
					// 	this.type2List = storeTypes
					// }else{
					// 	this.type2List = tourTypes
					// }
					// this.typeList = this.type2List
					//this.show_type = true
				}
				uni.hideLoading()
			},
			async getStore(id) {
				uni.showLoading({
					mask: true
				})
				const res = await getStore({
					id
				})
				if (res.code == 200) {
					this.type3List = res.data
					//this.typeList = this.type3List
					//this.show_type = true
				}
				uni.hideLoading()
			},
			// 删除图片
			deletePic(event) {
				this.imgList.splice(event.index, 1)
			},
			async afterRead(event, key) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[key].length
				lists.map((item) => {
					this[key].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$utils.uploadFile(lists[i].url)
					if (result.code == 200) {
						let item = this[key][fileListLen]
						this[key].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: this.api_host + result.full_url,
							api_url: result.full_url
						}))
						fileListLen++
					}
				}
				console.log(this[key]);
			},
			openTag() {
				this.tageText = ''
				this.show_tag = true
			},
			tagSubmit() {
				this.tagList.push(this.tageText)
				this.show_tag = false
			},
			delTag(index) {
				this.tagList.splice(index, 1)
			},
			chooseAddress() {
				const that = this
				uni.chooseLocation({
					success(res) {
						that.form.addr = res.name
					}
				})
			},
			show_pickerBtn(){
				this.show_picker = true
				// this.type2List = this.tourList
				// this.columns = [this.type1List,this.type2List]
				this.$refs.uPicker.setColumnValues(0, this.type1List)
				this.$refs.uPicker.setColumnValues(1, this.tourList)
			},
			async pickerChange(e) {
				console.log(e);
				
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				function setStoreList(){
					uni.showLoading({
						mask: true
					})
					getStore({
						id:value[1].id
					}).then(res =>{
						if (res.code == 200) {
							picker.setColumnValues(2, res.data)
						}
					})
					uni.hideLoading()
				}
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					//picker.setIndexs(1, 0)
					if(value[0].id == '1'){
						picker.setColumnValues(1, this.storeList)
						setStoreList()
						//this.columns = [this.type1List,this.type2List,this.type3List]
					}else{
						picker.setColumnValues(1, this.tourList)
						picker.setColumnValues(2, [])
						//this.columns = [this.type1List,this.type2List]
					}
					//picker.setColumnValues(1, this.columnData[index])
				}
				if (columnIndex === 1) {
					if(value[0].id == '1'){
						setStoreList()
					}
				}
			},
			getType(type){
				this.modal_typeIndex = 0
				this.modal_type = type
				switch (type){
					case 1:
						this.typeList = this.type1List
						this.show_type = true
						break;
					case 2:
						if(!this.type1.id){
							uni.showToast({
								title:'请选择一级栏目',
								icon:'none'
							})
							return false
						}
						this.getVlogcate()
						break;
					case 3:
						if(!this.type2.id){
							uni.showToast({
								title:'请选择二级栏目',
								icon:'none'
							})
							return false
						}
						this.getStore()
						break;
					
				}
			},
			typeConfirm() {
				switch (this.modal_type){
					case 1:
						this.type1 = this.typeList[this.modal_typeIndex]
						this.type2 = {}
						this.type3 = {}
						break;
					case 2:
						this.type2 = this.typeList[this.modal_typeIndex]
						this.type3 = {}
						break;
					case 3:
						this.type3 = this.typeList[this.modal_typeIndex]
						break;
				}
				this.show_type = false
			},
			checkForm(status){
				this.status = status
				if(!this.form.title){
					uni.showToast({
						title:'请输入标题',
						icon:'none'
					})
					return false
				}
				if(!this.form.sceneDesc){
					uni.showToast({
						title:'请输入描述',
						icon:'none'
					})
					return false
				}
				if(this.type == 1){
					if(this.imgList.length == 0){
						uni.showToast({
							title:'请上传图片',
							icon:'none'
						})
						return false
					}
				}else{
					if(this.videoList.length == 0){
						uni.showToast({
							title:'请上传视频',
							icon:'none'
						})
						return false
					}
					if(this.coverList.length == 0){
						uni.showToast({
							title:'请上传封面',
							icon:'none'
						})
						return false
					}
				}
				
				if(!this.form.addr){
					uni.showToast({
						title:'请选择地址',
						icon:'none'
					})
					return false
				}
				if(!this.type1.id){
					uni.showToast({
						title:'请选择一级栏目',
						icon:'none'
					})
					return false
				}
				if(!this.type2.id){
					uni.showToast({
						title:'请选择二级栏目',
						icon:'none'
					})
					return false
				}
				if(this.type1.id == 1){
					if(!this.type3.id){
						uni.showToast({
							title:'请选择三级栏目',
							icon:'none'
						})
						return false
					}
				}
				if(this.status == 1){
					this.show_sure = true
				}else{
					this.submitForm()
				}
			},
			async submitForm(){
				this.show_sure = false
				let resContent = []
				let coverIcon = ''
				if(this.type == 1){
					this.imgList.forEach(item =>{
						resContent.push(item.api_url)
					})
					coverIcon = resContent[0]
				}else{
					this.videoList.forEach(item =>{
						resContent.push(item.api_url)
					})
					coverIcon = this.coverList[0].api_url
				}
				let data = {}
				data = {
					title:this.form.title,
					sceneDesc:this.form.sceneDesc,
					resType:this.type,
					resContent:resContent.join(','),
					addr:this.form.addr,
					vlogLabel:this.tagList.join('|'),
					vlogStatus:this.status,
					relatedColumn:this.type1.id,
					relateType:this.type2.id,
					subId:this.type3.id,
					coverIcon:coverIcon
				}
				uni.showLoading({
					mask: true
				})
				const res = await createVlog(data)
				if (res.code == 200) {
					uni.showToast({
						title:this.status == 1?'发布成功，请等待审核':'草稿保存成功',
						icon:'none'
					})
					setTimeout(() =>{
						uni.redirectTo({
							url:this.status == 1?'/pages/index/index?tab_index=4':'/subpage/me/draft'
						})
					},1000)
				}
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FEF4E8;
	}

	.upload_box {
		width: 100px;
		height: 100px;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.fix-bot {
		border-radius: 50rpx 50rpx 0 0;
	}

	.tag {
		max-width: 30%;
		border: 1px solid #f7f7f7;
	}
</style>